<template>
  <div class="con5 bg-white">
    <div class="container">
      <div class="row">
        <div class="col">
          <el-page-header @back="$router.push('/')"> </el-page-header>
        </div>
      </div>
    </div>
    <br>
    <br>
    <div class="container">
      <div class="row">
        <div v-if="data" class="col" v-html="data.info"></div>
        <div v-else class="col">
          访问的新闻不存在
          <a :href="baseUrl">返回首页</a>
        </div>
      </div>
      <div class="row pt-5">
        <div class="col">
          <span v-if="prev"
            ><router-link
              tag="span"
              class="cu"
              :to="{ name: 'newsinfo', params: { id: prev.id } }"
            >
              <span class="text-primary">上一个</span>
              <span>{{ prev.title }}</span></router-link
            >
          </span>
        </div>
        <div class="col text-right">
          <span v-if="next1" class="cu"
            ><router-link
              tag="span"
              :to="{ name: 'newsinfo', params: { id: next1.id } }"
              ><span class="text-primary">下一个</span>
              <span>{{ next1.title }}</span></router-link
            >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import newlist from "../data/index.js";
export default {
  props: ["id"],
  data() {
    const baseUrl = window.baseUrl;
    return {
      newlist: newlist.newlist || [],
      baseUrl,
    };
  },
  computed: {
    data() {
      return this.newlist.find((v) => v.id == this.id);
    },
    next1() {
      const index = this.newlist.findIndex((v) => v.id == this.id);
      if (this.newlist[index + 1]) {
        return this.newlist[index + 1];
      }
      return false;
    },
    prev() {
      const index = this.newlist.findIndex((v) => v.id == this.id);
      if (this.newlist[index - 1]) {
        return this.newlist[index - 1];
      }
      return false;
    },
  },
};
</script>
<style scoped>
.con5 {
  padding-top: 40px;
  padding-bottom: 150px;
}
.cu {
  cursor: pointer;
}
</style>
